<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/base.js"></script>
    <title>服务详情</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/userinfo.css">
    <link rel="stylesheet" href="css/service.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="js/layer_mobile/need/layer.css">
    <script src="js/layer_mobile/layer.js"></script>
</head>
<body class="" style="overflow: scroll;background: #e5e5e5">
<section class="wrap " style="position: relative">
    <div id="area-info" style="display: none;position: absolute;width: 100%;">
        <ul class="tab bg-white" >
            <li  class="tab-item active " id="province">
                <span>选择省</span>
                <img src="images/selected.png"/>
            </li>
            <li  class="tab-item" id="city">
                <span>选择市</span>
                <img src="images/arrow_down.png"/>
            </li>
            <li  class="tab-item" id="area">
                <span>选择区</span>
                <img src="images/arrow_down.png"/>
            </li>
        </ul>
        <div id="selected-list">
            <ul class="sel-province clearfix">
                <li class=" pull-left"><span>北京市</span></li>
                <li class="pull-left "><span>天津市</span></li>
                <li class="pull-left "><span>上海市</span></li>
                <li class="pull-left"><span>重庆市</span></li>
                <li class="pull-left"><span>四川市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
            </ul>
            <ul  class="sel-city clearfix">
                <li class="pull-left "><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
            </ul>
            <ul class="sel-area clearfix">
                <li class="pull-left "><span>朝阳区</span></li>
                <li class="pull-left"><span>海淀区</span></li>
                <li class="pull-left"><span>东城区</span></li>
                <li class="pull-left"><span>西城区</span></li>
                <li class="pull-left"><span>丰台区</span></li>
                <li class="pull-left"><span>大兴区</span></li>
                <li class="pull-left"><span>朝阳区</span></li>
                <li class="pull-left"><span>海淀区</span></li>
                <li class="pull-left"><span>东城区</span></li>
                <li class="pull-left"><span>西城区</span></li>
                <li class="pull-left"><span>丰台区</span></li>
                <li class="pull-left"><span>大兴区</span></li>
            </ul>
        </div>
    </div>
    <script>
        $(function(){
            $('.tab-item').on('click',function(){
                $('#selected-list ul').hide();
                $('.tab-item').removeClass('active');
                $('.tab-item').children('img').attr('src','images/arrow_down.png');
                if($(this).hasClass('active')){
                }else {
                    $(this).addClass('active');
                    $(this).children('img').attr('src','images/selected.png');
                    var selected = $(this).attr('id');
                    if(selected == 'province'){
                        $(' #selected-list .sel-province ').show();
                    }
                    if(selected == 'city'){
                        $(' #selected-list .sel-city ').show();
                    }
                    if(selected == 'area'){
                        $(' #selected-list .sel-area ').show();
                    }
                }
            });
            $('#selected-list  ul li').on('click',function(){
                $(this).parent().children('li').removeClass('active');;
                $(this).addClass('active');
                if($(this).parent().hasClass('sel-province')){
                    $('#province span').html($(this).children('span').text());
                }
                if($(this).parent().hasClass('sel-city')){
                    if( $('#province span').html()  == '选择省'){
                        layer.open({
                            content:'请先选择省'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $('#city span').html($(this).children('span').text());
                    }
                }
                if($(this).parent().hasClass('sel-area')){
                    if( $('#city span').html()  == '选择市'){
                        layer.open({
                            content:'请先选择省、市'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $('#area span').html($(this).children('span').text());
                        $('#area-info').hide();
                        $('#selectedArea').html( $('#province span').html()+'-'+ $('#city span').html()+'-'+$('#area span').html());
                    }
                }

            });
        });
    </script>
    <div class="service-detail">
       <div class="service-detail-img"><img src="images/service1.png"></div>
       <div class="service-detail-introduce ">
           <span class="service-name padding-left-12">注册内资有限公司</span>
           <span class="service-price padding-left-12">¥500.00</span>
       </div>
       <div class="service-select-area clearfix ">
           <span class="pull-left padding-left-12" id="selectedArea">选择地区</span>
           <span class="pull-right"><img src="images/next.png"></span>
       </div>
        <script>
        $(function(){
            $('.service-select-area').on('click',function(){
                $('#area-info').show();
            });
        })
        </script>
       <div class="service-detail-other">
           <ul class="clearfix padding-left-12">
               <li class="pull-left clearfix">
                   <div class="pull-left"><img src="images/baozhang.png"></div>
                   <div class="pull-left">资质认证</div>
               </li>
               <li class="pull-left clearfix">
                   <div class="pull-left"><img src="images/baozhang.png"></div>
                   <div class="pull-left">信息保密</div>
               </li>
               <li class="pull-left clearfix">
                   <div class="pull-left"><img src="images/baozhang.png"></div>
                   <div class="pull-left">价格透明</div>
               </li>
               <li class="pull-left clearfix">
                   <div class="pull-left"><img src="images/baozhang.png"></div>
                   <div class="pull-left">价格透明</div>
               </li>
           </ul>
       </div>
    </div>
    <div class="comment padding-left-12">
        <div class="comment-title "> 用户评价（2322）</div>
        <ul >
            <li>
                <div class="comment-info1 clearfix">
                    <span style="display: block;width: 0.7253333rem"><img src="images/comment.png"></span>
                    <span>梵蒂冈</span>
                    <span>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                          <label><img src="images/weiping.png"></label>
                    </span>
                </div>
                <div class="comment-info2">
                    <span>2017-09-12</span>
                    <span>北京-海淀区</span>
                </div>
                <div class="comment-info3">
                    服务很好，很周到，办事效率高服务很好，很周到，办事效率高服务很
                </div>
            </li>
            <li>
                <div class="comment-info1 clearfix">
                    <span style="display: block;width: 0.7253333rem"><img src="images/comment.png"></span>
                    <span>梵蒂冈</span>
                    <span>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                        <label><img src="images/ping.png"></label>
                          <label><img src="images/weiping.png"></label>
                    </span>
                </div>
                <div class="comment-info2">
                    <span>2017-09-12</span>
                    <span>北京-海淀区</span>
                </div>
                <div class="comment-info3">
                    服务很好，很周到，办事效率高服务很好，很周到，办事效率高服务很
                </div>
            </li>
            <li>
                <a class="comment-other"  href="comment.html">查看全部评论</a>
            </li>
        </ul>
    </div>
    <div class="service-detail-detail">
      <div class="bar_20"></div>
      <div  class="service-detail-title clearfix">
          <span class="service-detail-line pull-left"></span>
          <span class="pull-left">服务详情</span>
          <span  class="service-detail-line pull-left"></span>
      </div>
      <div class="service-detail-detail-img"><img src="images/detail-detail.png"></div>
    </div>
    <div class="service-guarantee">
        <div class="bar_20"></div>
        <div  class="service-detail-title clearfix">
            <span class="service-detail-line pull-left"></span>
            <span class="pull-left">服务保障</span>
            <span  class="service-detail-line pull-left"></span>
        </div>
        <ul>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="images/baozhang1.png">
                </div>
                <div  class="pull-left">
                    <span>我们的承诺</span>
                    <span >关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="images/baozhang2.png">
                </div>
                <div  class="pull-left">
                    <span>我们的承诺</span>
                    <span>关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
            <li class="clearfix">
                <div  class="pull-left">
                    <img src="images/baozhang3.png">
                </div>
                <div class="pull-left">
                    <span>我们的承诺</span>
                    <span>关于服务质量的反馈，我们会第一时间专人处理，包拯及时 解决您的问题</span>
                </div>
            </li>
        </ul>
    </div>
    <div class="content-phone">
        <a >电话咨询</a>
        <a href="orderConfirm.html" style="border-top: 1px solid #049eff">立即购买</a>
    </div>
</section>

</body>
</html>